<div class="prompt-info">
  <i class="iconfont icon-tishi"></i>展示在小程序首页橱窗位置
</div>
<div class="table-responsive">
  <table class="table table-hover">
    <thead>
    <tr>
      <!--<th>ID</th>-->
      <th>排序号</th>
      <th>名称</th>
      <th>数量</th>
      <th>高度</th>
      <th>宽度</th>
      <th>位置示意图</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of list">
      <!--<td>{{item.id}}</td>-->
      <td><span class="circle-green" [ngClass]="{'active': item.name === operateName}"></span>{{item.sort}}</td>
      <td>{{item.name}}</td>
      <td>{{item.quantity}}</td>
      <td>{{item.height}}</td>
      <td>{{item.width}}</td>
      <td><img class="img-control" *ngIf="!!item.area_diagram" src="{{aliyunOssOutputUrl}}/{{item.area_diagram}}?{{item.updated_at}}"></td>
      <td class="operate">
        <a href="javascript:;" (click)="doManage(item)">管理</a>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<!-- 展位单元管理 -->
<div class="info-line" *ngIf="nowShowCase">您正在管理 <strong>{{nowShowCase.name}}</strong> 橱窗
  <button class="btn btn-default pull-right" (click)="addUnitDlg()">添加</button>
</div>
<div class="table-responsive" *ngIf="nowShowCase">
  <table class="table table-hover">
    <thead>
    <tr>
      <th>ID</th>
      <th>排序号</th>
      <th>名称</th>
      <th>链接</th>
      <th>类型</th>
      <th>图片</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let item of ShowCaseDetailList">
      <td>{{item.id}}</td>
      <td>{{item.sort}}</td>
      <td>{{item.name}}</td>
      <td>{{item.url}}</td>
      <td>{{translateType(item.type)}}</td>
      <td><img class="img-control" *ngIf="!!item?.image" src="{{aliyunOssOutputUrl}}/{{item.image}}?{{item.updated_at}}"></td>
      <td class="operate">
        <a href="javascript:;" (click)="editUnitDialog(item.id)">编辑</a>
        <a href="javascript:;" (click)="delDialog(item.id)">删除</a>
      </td>
    </tr>
    </tbody>
  </table>
</div>

<!-- 是否确认删除 -->
<div class="modal fade" bsModal #deleteModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">确认</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body text-center">
        <p>确定删除吗？</p>
      </div>
      <div class="text-right mb20">
        <button class="btn btn-default btn-md-long" type="button" (click)="deleteModal.hide()">取消</button>
        <button class="btn btn-success btn-md-long" type="button" (click)="delShowCaseDetail()">确定</button>
      </div>
    </div>
  </div>
</div>


<!-- 新增单元管理 -->
<div bsModal #addUnitModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">新增橱窗单元</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addUnitModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #addUnitForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>名称</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="name" #name1="ngModel" [(ngModel)]="name" required>
              <p [hidden]="name1.pristine || name1.valid" class="alert alert-danger">名称不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>类型</label>
            <div class="col-md-7">
              <select name="types" class="form-control" [(ngModel)]="types" (change)="relationID=0">
                <option value="">请选择</option>
                <option value="product">产品</option>
                <option value="activity">活动</option>
                <option value="page">页面</option>
                <option value="picture">图片</option>
                <option value="coupons">卡券</option>
              </select>
            </div>
          </div>
          <!--{{relationID}}-->
          <div class="form-group clearfix" *ngIf="types === 'product'">
            <label class="col-md-3"><span class="c-red">*</span>选择商品</label>
            <div class="col-md-7">
              <select name="relationID" class="form-control" [(ngModel)]="relationID">
                <option value="0">请选择商品</option>
                <option value="{{item.id}}" *ngFor="let item of allGoodsList">{{item.name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix" *ngIf="types === 'activity'">
            <label class="col-md-3"><span class="c-red">*</span>选择活动</label>
            <div class="col-md-7">
              <select name="relationID" class="form-control" [(ngModel)]="relationID">
                <option value="0">请选择活动</option>
                <option value="{{item.activity_id}}" *ngFor="let item of allActivityList">{{item.goods_name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix" *ngIf="types === 'coupons'">
            <label class="col-md-3"><span class="c-red">*</span>选择卡券</label>
            <div class="col-md-7">
              <select name="relationID" class="form-control" [(ngModel)]="relationID">
                <option value="0">请选择卡券</option>
                <option value="{{item.card_coupons_uuid}}" *ngFor="let item of couponList">id: {{item.id}} 名称: {{item.card_coupons_name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>排序</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="sort" #sort1="ngModel" [(ngModel)]="sort" required>
              <p [hidden]="sort1.pristine || sort1.valid" class="alert alert-danger">序号不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">链接</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="url" [(ngModel)]="url">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">展示图</label>
            <div class="col-md-7">
              <div class="ui-file">
                <i class="iconfont icon-add"></i>
                上传图片
                <input class="ui-file-input" type="file" name="license" (change)="uploadImg($event,'showcaseDetail')">
              </div>
              <div class="edvert-photo-warp">
                <img src="{{img_url}}">
              </div>
              <!--<p class="alert alert-danger">请上传图片!</p>-->
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer">
        <button type="submit" class="btn btn-default" (click)="addUnitModal.hide()">取 消</button>
        <button type="button" class="btn btn-success" [disabled]="!addUnitForm.form.valid" (click)="addUnitSubmit()">确
          定
        </button>
      </div>
    </div>
  </div>
</div>


<!-- 编辑单元管理 -->
<div bsModal #editUnitModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" [config]="{backdrop: 'static'}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">管理橱窗单元</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="editUnitModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form #editUnitForm="ngForm">
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>名称</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="name" #name1="ngModel" [(ngModel)]="name" required>
              <p [hidden]="name1.pristine || name1.valid" class="alert alert-danger">名称不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>类型</label>
            <div class="col-md-7">
              <select name="types" class="form-control" [(ngModel)]="types" (change)="relationID=0">
                <option value="">请选择</option>
                <option value="product">产品</option>
                <option value="activity">活动</option>
                <option value="page">页面</option>
                <option value="picture">图片</option>
                <option value="coupons">卡券</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix" *ngIf="types === 'product'">
            <label class="col-md-3"><span class="c-red">*</span>选择商品</label>
            <div class="col-md-7">
              <select name="type" class="form-control" [(ngModel)]="relationID">
                <option value="0">请选择商品</option>
                <option value="{{item.id}}" *ngFor="let item of allGoodsList">{{item.name}}</option>
              </select>
            </div>
          </div>

          <div class="form-group clearfix" *ngIf="types === 'activity'">
            <label class="col-md-3"><span class="c-red">*</span>选择活动</label>
            <div class="col-md-7">
              <select name="relationID" class="form-control" [(ngModel)]="relationID">
                <option value="0">请选择活动</option>
                <option value="{{item.activity_id}}" *ngFor="let item of allActivityList">{{item?.activity?.name}}-{{item?.goods_name}}</option>
              </select>
            </div>
          </div>
          <div class="form-group clearfix" *ngIf="types === 'coupons'">
            <label class="col-md-3"><span class="c-red">*</span>选择卡券</label>
            <div class="col-md-7">
              <select name="relationID" class="form-control" [(ngModel)]="relationID">
                <option value="0">请选择卡券</option>
                <option value="{{item.card_coupons_uuid}}" *ngFor="let item of couponList">id: {{item.id}} 名称: {{item.card_coupons_name}}</option>
              </select>
            </div>
          </div>
          <!--{{relationID}}-->
          <!--<div class="form-group clearfix" *ngIf="editUnit.type === 'coupons'">-->
          <!--<label class="col-md-3"><span class="c-red">*</span>礼券ID</label>-->
          <!--<div class="col-md-7">-->
          <!--<input type="text" class="form-control" name="relationID" #relationID="ngModel" [(ngModel)]="editUnit.relationID" required>-->
          <!--<p [hidden]="relationID.pristine || relationID.valid" class="alert alert-danger">ID不能为空!</p>-->
          <!--</div>-->
          <!--</div>-->
          <div class="form-group clearfix">
            <label class="col-md-3"><span class="c-red">*</span>序号</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="sort" #sort1="ngModel" [(ngModel)]="sort" required>
              <p [hidden]="sort1.pristine || sort1.valid" class="alert alert-danger">序号不能为空!</p>
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">链接</label>
            <div class="col-md-7">
              <input type="text" class="form-control" name="url" [(ngModel)]="url">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-3">展示图</label>
            <div class="col-md-7">
              <div class="ui-file">
                <i class="iconfont icon-add"></i>
                上传图片
                <input class="ui-file-input" type="file" name="license" (change)="uploadImg($event,'showcaseDetail')">
              </div>
              <div class="edvert-photo-warp">
                <img src="{{img_url}}">
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="model-footer">
        <button type="submit" class="btn btn-default" (click)="editUnitModal.hide()">取 消</button>
        <button type="button" class="btn btn-success" [disabled]="!editUnitForm.form.valid" (click)="editUnitSubmit()">确 定</button>
      </div>
    </div>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow" (promptIsShow)="isShow = $event;"></app-notification>
